import React, {Component} from 'react'
import {Link, history} from 'react-router'
import {R_header_fixed} from './common/index'
import {Toast, HttpService} from '../Http'

import '../plugins/city/css/LArea.css'
import '../plugins/city/js/LArea.js'

export default class Address extends Component {
    constructor(props) {
        super(props)
        this.res = {}
    }
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };
    componentWillMount() {
        HttpService.query({
            url: '/app/user/getUserinfo',
            sync: false,
            data: {
                token: localStorage.appToken,
                babyid: localStorage.babyid
            },
            success: (res => {
                this.res = res;
            })
        });
    }
    componentDidMount() {
        this.refs.name.value = this.res.data.recivername
        this.refs.phone.value = this.res.data.telephone
        if (this.res.data.province) {
            this.refs.city.value = this.res.data.province + ',' + this.res.data.city + ',' + this.res.data.town
        } else {
            this.refs.city.value = '选择收货地址'
        }

        this.refs.detail.value = this.res.data.deliveryaddr

        HttpService.query({
            url: '/app/user/getUserinfo',
            sync: true,
            data: {
                token: localStorage.appToken,
                babyid: localStorage.babyid
            },
            success: (res => {
                this.refs.name.value = res.data.recivername
                this.refs.phone.value = res.data.telephone
                if (res.data.province) {
                    this.refs.city.value = res.data.province + ',' + res.data.city + ',' + res.data.town
                } else {
                    this.refs.city.value = '选择收货地址'
                }

                this.refs.detail.value = res.data.deliveryaddr
            })
        });
        HttpService.query({
            url: '/dist/json/city.min.json',
            sync: true,
            success: (data => {
                var area = new LArea();
                area.init({
                    'trigger': '#city',
                    'keys': {
                        id: 'id',
                        name: 'n'
                    }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
                    'type': 1, //数据源类型
                    'data': data //数据源
                });
                area.value = [0, 0, 0]; //控制初始位置，注意：该方法并不会影响到input的value
            })
        });
    }

    adsSubmit(e) {
        e.preventDefault();
        let name = this.refs.name.value.replace(/\s/g, '')
        let phone = this.refs.phone.value.replace(/\s/g, '')
        let city = this.refs.city.value.replace(/\s/g, '')
        let detail = this.refs.detail.value.replace(/\s/g, '')
        if (name == '') {
            Toast.toast('请输入收货人姓名')
            return;
        }
        if (name.length > 5) {
            Toast.toast('收货人姓名限制5位')
            return;
        }
        if (phone == '') {
            Toast.toast('请输入收货人手机号')
            return;
        }
        if (!/^1[34578]\d{9}$/.test(phone)) {
            Toast.toast('请填写正确的手机号')
            return;
        }
        if (city == '') {
            Toast.toast('请输入收货人地址')
            return;
        }
        if (detail == '') {
            Toast.toast('请输入收货人详细地址')
            return;
        }
        if (detail.length >= 30) {
            Toast.toast('详细地址长度不超过30个字符')
            return;
        }

        HttpService.query({
            url: '/app/user/save',
            sync: true,
            data: {
                token: localStorage.appToken,
                babyid: localStorage.babyid,
                reciver: name,
                province: city.split(',')[0],
                city: city.split(',')[1],
                town: city.split(',')[2],
                deliveryaddr: detail
            },
            success: (res => {
                // location.hash = '#/BuyDevice/' + this.props.params.shengji;
                this.context.router.goBack();
            })
        });

    }
    render() {
        return (
            <form className='buyadres' onSubmit={this.adsSubmit.bind(this)}>
                <R_header_fixed left="1" title="收货人信息"/>
                <div className='buytb'>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    收货人
                                </td>
                                <td>
                                    <input type="text" ref='name' placeholder='填写收货人'/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    手机号
                                </td>
                                <td>
                                    <input type="number" ref='phone' readOnly='true' disabled='true' placeholder='填写收货人手机号' maxLength='11'/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    省市区县
                                </td>
                                <td>
                                    <input type="button" style={{
                                        textAlign: 'left'
                                    }} ref='city' id='city' placeholder='填写收货人地址'/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    详细地址
                                </td>
                                <td>
                                    <textarea type="text" ref='detail' placeholder='小区、楼栋、门牌号' cols='3'></textarea>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div className='btnbox'>
                    <button className='adsubmit' onClick={this.adsSubmit.bind(this)}>保存</button>
                </div>
            </form>
        )
    }
}
